<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>手写签名</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="./css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="./css/common.css" />
		<style>
			.sign-wrap {
				padding: 0 12px;
			}
			.btn-wrap {
				overflow: hidden;
				padding-top: 10px;
			}
			.btn-wrap #clearBtn {
				height: 40px;
				float: left;
			}
			.btn-wrap #saveBtn {
				float: right;
				height: 40px;
				background-color: #4cc8cf;
				border-color: #4cc8cf;
				font-size: 15px;
			}
			.btn-wrap #saveBtn:active {
				background-color: #27e2ed;
				border-color: #27e2ed;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" id="sign-page">
			<p class="sub-title">在以下方框手写内容</p>
			<div class="sign-wrap">
				<div class="js-signature" id="js-signature" data-width="100%" data-height="450" data-border="1px solid #e5e5e5" data-line-color="#bc0000" data-auto-fit="true"></div>
				<div class="btn-wrap">
					<button id="clearBtn" class="mui-btn" onclick="clearCanvas()">清除内容</button>
					<button id="saveBtn" class="mui-btn mui-btn-primary" onclick="saveSignature()">确定</button>
				</div>
			</div>
		</div>
		<script src="./js/mui.min.js"></script>
		<script src="./js/jquery.v1_11_0.min.js"></script>
		<script src="./js/jq-signature.js"></script>
		<script src="./js/common.js"></script>
		<script>
			console.log('sign page start');

			$(document).on('ready', function() {
				if ($('#js-signature').length) {
					$('#js-signature').jqSignature();
				}
			});

			function clearCanvas() {
				$('#js-signature').eq(0).jqSignature('clearCanvas');
				$('#saveBtn').attr('disabled', true);
			}

			function saveSignature() {
				var dataUrl = $('#js-signature').eq(0).jqSignature('getDataURL');
				// 发送提交请求
				mui.ajax('http://121.41.85.178:7300/mock/5acc68cb77a58d43f11ae3e4/muiapi/sign',{
					data: {
						base64: dataUrl
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(data){
						console.log(data);
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
			}

			$('#js-signature').eq(0).on('jq.signature.changed', function() {
				$('#saveBtn').attr('disabled', false);
			});
		</script>
	</body>

</html>